<template>
	<div class="news_content">
		<div class="card" v-for="(item,index) in news">
			<div class="up_box">
				<div class="up_left">
					<img :src="require(`@/assets/images/${item.src}`)" alt="" />
				</div>
				<div class="up_right">
					<div class="up_right_box">
						<p class="news_left_title">{{item.title}}</p>
						<p class="news_right_content">{{item.content}}</p>
					</div>
				</div>
			</div>
			<div class="low_box">
				<div class="low_layout" v-for="(value,key) in item.iconSrc" @click="toggleLike(item, key)">
					<img :src="require(`@/assets/icons/${value.path}`)" alt="">
					<span :style="{ color: value.liked ? 'red' : 'black' }">{{value.count}}</span>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'newsCard',
		props: {
			news: {
				type: Array,
				default: () => []
			}
		},
		data() {
			return {

			};
		},
		methods: {
			toggleLike(item, key) {
				this.$emit('newscont', item, key)
			}
		}
	};
</script>

<style lang="less">
	.news_content {
		.card {
			display: flex;
			flex-flow: column nowrap;
			width: 500px;
			height: 300px;
			border: 2px solid #fc9b39;
			border-radius: 10px;
			margin: 50px auto;
	
			.up_box {
				display: flex;
				height: 75%;
	
				img {
					width: 220px;
					height: 220px;
					border-radius: 10px;
				}
	
				.up_right {
					display: flex;
					width: 230px;
					margin-left: 20px;
					flex-flow: column nowrap;
					background-color: #fff;
	
	
					.news_left_title {
						margin: 20px 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						background-color: #f5f5f5;
					}
	
					.news_right_content {
						margin: 20px 0;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 3;
						overflow: hidden;
						background-color: #fff;
					}
				}
			}
	
			.low_box {
				display: flex;
				flex-flow: row nowrap;
				justify-content: space-around;
				height: 25%;
	
				.low_layout {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-flow: row nowrap;
	
					img {
						width: 35px;
						height: 35px;
					}
				}
			}
		}
	}
</style>